<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算时间差</title>
</head>
<style>
    div {
        width: 700px;
        height: 100px;
        background: pink;
        margin: auto;
        font-size: 20px;
        font-weight: 800px;
        color: #58bc58;
        border-radius: 20px;
        text-align: center;
       
    }

    input {
        width: 40px;
        height: 20px;
        line-height: 400px;
        margin: auto;
      
    }
    li{ 
        float: left;
        list-style: none;
        line-height: 100px;
    }
    ::-webkit-input-placeholder{
        color: crimson;
        font-size: 10px;
    }
    button{
        color: #58bc58;
        background: cornsilk;
    }
</style>

<body>
    <div>
        <ul >
            <li><input id="btn1" type="text"placeholder='请输入年份'>:年</li>
            <li><input id="btn2" type="text"placeholder='请输入月份'>：月</li>
            <li><input id="btn3" type="text"placeholder='请输入天数'>：日</li>
            <li><input id="btn4" type="text"placeholder='请输入时刻'>：时</li>
            <li><input id="btn5" type="text"placeholder='请输入分钟'>：分</li>
            <li><input id="btn6" type="text"placeholder='请输入秒钟'>：秒</li>
        </ul>
            <li> <button id="bo">天数</button></li>
            <li> <input id="zong" type="text"placeholder='总天数'></li>
    </div>

    <script type="text/javascript">
        // var date1 = btn.innerHTML;  //开始时间
        var date2 = new Date();    //结束时间
        var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数    
        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000))
        //计算出小时数
        var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000))
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000))
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000)
        bo.onclick=function(){
         zong.value= days,hours,minutes,seconds;
        }
        // alert(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
    </script>

</body>

</html>